<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Music Maker</title>
<link rel="stylesheet" type="text/css" href="style.css" />

<script src="json2.js"></script>
<script src="DummyProgramator.js"></script>
<script src="Player.js"></script>
<script src="DrumMachine.js"></script>    
<script src="view.js"></script>
<script src="visualization.js"></script>

</head>

<body onload="init(); initVisualizer(); loadSongs();">

<div id="board">
	<table id="mixerBoard" border='1' cellspacing='10' cellpadding='10'>
	</table>
	
	<form>
		<input type="button" value="start" onclick="player.play();"/>
		<input type="button" value="stop" onclick="player.pause();"/>
		<input type="button" value="save" onclick="save();"/>
		<input type="button" value="load" onclick="load();"/>
		<select id="songList"></select>
	</form>
	
	<div style="float:center;">
	<table>
		<tr>
			<td><label for="bpm">BPM</label></td>
			<td><input type="range" min="80" max="160" value="120" id="bpm"
				onchange="player.setBPM(this.value);" /></td>
		</tr>
		<tr>
			<td><label for="shuffle">Shuffle</label></td>
			<td><input type="range" min="0" max="50" value="0" id="shuffle"
				onchange="player.setShuffle(this.value);" /></td>
		</tr>
		<tr>
			<td><label for="toolkitSelection">Toolkit:</label></td>
			<td><select id="toolkitSelection" name="toolkits" onchange="changeToolkit();">
			</select></td>
		</tr>
	</table>
	</div>
	
	<div><canvas id="visualizer" width="512" height="100"></canvas></div>

</div>


</body>
</html>